import { currentProfile } from "@/lib/current-profile";
import { db } from "@/lib/db";
import { ChannelType, MemberRole } from "@prisma/client";
import { channel } from "diagnostics_channel";
import { redirect } from "next/navigation";
import { ServerHeader } from "./server-header";
import { ScrollArea } from "@/components/ui/scroll-area";
import { ServerSearch } from "./server-search";
import { Hash, Mic, ShieldAlert, ShieldCheck, Video } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import { ServerSection } from "./server-section";
import { ServerChannel } from "./server-channel";
import { ServerMember } from "./server-member";

interface ServerSidebarProps {
    serverId: string;
}

const iconMap = {
    [ChannelType.Text]: <Hash className="mr-2 h-4 w-4" />,
    [ChannelType.AUDIO]: <Mic className="mr-2 h-4 w-4" />,
    [ChannelType.VIDEO]: <Video className="mr-2 h-4 w-4" />
}

const roleIconMap = {
    [MemberRole.GUEST]: null,
    [MemberRole.MODERATOR]: <ShieldCheck className="h-4 w-4 ml-2 text-indigo-500" />,
    [MemberRole.ADMIN]: <ShieldAlert className="h-4 w-4 ml-2 text-indigo-500" />
}

export const ServerSidebar = async ({
    serverId
}: ServerSidebarProps) => {

    const profile = await currentProfile();

    if(!profile) {
        return redirect("/");
    }

    const server = await db.server.findUnique({
        where: {
            id: serverId
        },
        include: {
            channel: {
                orderBy: {
                    createdAt: "asc",
                }
            },
            members: {
                include: {
                    profile: true,
                },
                orderBy: {
                    role: "asc",
                }
            }
        }
    })

    const  textChannels = server?.channel.filter((c) => c.type === ChannelType.Text)
    const  audioChannels = server?.channel.filter((c) => c.type === ChannelType.AUDIO)
    const  videoChannels = server?.channel.filter((c) => c.type === ChannelType.VIDEO)
    
    const members = server?.members.filter((m) => m.profileId !== profile.id)



    if(!server) {
        return redirect("/");
    }

    const role = server.members.find((m)=> m.profileId === profile.id)?.role;



    return (
        <div className="flex flex-col h-full text-primary w-full dark:bg-[#2B2D31] bg-[#F2F3F5]">
            <ServerHeader server={server} role={role} />
            <ScrollArea className="flex-1 px-3">
                <div className="mt-2">
                    <ServerSearch data={[{
                        label: "Text Channel",
                        type: "channel",
                        data: textChannels?.map((channel) => ({
                            id: channel.id,
                            name: channel.name,
                            icon: iconMap[channel.type]
                        }))
                    },
                    {
                        label: "Voice Channel",
                        type: "channel",
                        data: audioChannels?.map((channel) => ({
                            id: channel.id,
                            name: channel.name,
                            icon: iconMap[channel.type]
                        }))
                    },
                    {
                        label: "Video Channel",
                        type: "channel",
                        data: videoChannels?.map((channel) => ({
                            id: channel.id,
                            name: channel.name,
                            icon: iconMap[channel.type]
                        }))
                    },
                    {
                        label: "Members",
                        type: "member",
                        data: members?.map((member) => ({
                            id: member.id,
                            name: member.profile.name,
                            icon: roleIconMap[member.role]
                        }))
                    }
                    ]}></ServerSearch>
                </div>
                <Separator className="bg-zinc-200 dark:bg-zinc-700 rounded-md my-2" />
                {!!textChannels?.length && (
                    <div className="mb-2">
                        <ServerSection sectionType="channels"
                         channelType={ChannelType.Text} role={role} label="Text Channels"></ServerSection>
                        <div className="space-y-[2px]">
                            {textChannels.map((channel)=>(
                                <ServerChannel key={channel.id}
                                channel={channel} role={role} server={server}></ServerChannel>
                            ))}
                        </div>
                    </div>
                )}
                {!!audioChannels?.length && (
                    <div className="mb-2">
                        <ServerSection sectionType="channels"
                         channelType={ChannelType.AUDIO} role={role} label="Voice Channels"></ServerSection>
                        <div className="space-y-[2px]">
                            {audioChannels.map((channel)=>(
                                <ServerChannel key={channel.id}
                                channel={channel} role={role} server={server}></ServerChannel>
                            ))}
                        </div>
                    </div>
                )}
                {!!videoChannels?.length && (
                    <div className="mb-2">
                        <ServerSection sectionType="channels"
                         channelType={ChannelType.VIDEO} role={role} label="Video Channels"></ServerSection>
                        <div className="space-y-[2px]">
                            {videoChannels.map((channel)=>(
                                <ServerChannel key={channel.id}
                                channel={channel} role={role} server={server}></ServerChannel>
                            ))}
                        </div>
                    </div>
                )}
                {!!members?.length && (
                    <div className="mb-2">
                        <ServerSection sectionType="members" server={server}
                         role={role} label="Members"></ServerSection>
                        <div className="space-y-[2px]">
                            {members.map((member)=>(
                                <ServerMember key={member.id} member={member} server={server} />
                            ))}
                        </div>
                    </div>
                )}  
            </ScrollArea>
        </div>
    )
}